<script setup="">
import Card from "../help/Card.vue";
import {nextTick, ref} from 'vue'
import {EchartsOptions} from "../help/index.js";

const id = ref(Math.random().toString(36).substring(2, 9))

const columns = [
  { label: '敏感度', value: 10},
  { label: '灵活度', value: 9},
  { label: '创新度', value: 6},
  { label: '自信度', value: 10},
  { label: '活跃度', value: 5},
  { label: '安全度', value: 10},
  { label: '完成度', value: 10},
  { label: '准确度', value: 10},
  { label: '进取度', value: 10},
  { label: '热爱度', value: 10},
]

const option = {
  legend: {
    show: false
  },
  tooltip: {

  },
  grid: {
    top: 0,
    bottom: 0,
    left:0,
    right: 0
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: '知识', max: 100 },
      { name: '素养', max: 100 },
      { name: '技能', max: 100 },
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [20, 40, 30],
          name: '一组'
        },
        {
          value: [50, 60, 70],
          name: '二组'
        },
        {
          value: [30, 40, 50],
          name: '三组'
        },
        {
          value: [30, 40, 50],
          name: '四组'
        },
        {
          value: [30, 40, 50],
          name: '五组'
        },
        {
          value: [30, 40, 50],
          name: '六组'
        },
      ]
    }
  ]
};

nextTick(() => {
  EchartsOptions(option, id.value)
})
</script>

<template>
  <div class="flex basis-2/5 animate__animated animate__fadeInTopRight">
    <Card title="目标达成" class="flex w-full h-full">
      <div class="w-full h-full flex gap-x-3 py-3 px-1">
        <div class="flex basis-4/6 h-full" :id="id"/>
        <div class="flex basis-2/6 h-[75%] flex-col items-center overflow-y-scroll mt-3 text-base">
          <div class="w-full h-[50px] flex flex-col items-center justify-center gap-y-1"
              v-for="i in columns"
               :key="i.label"
          >
            <div class="flex justify-between items-center w-full h-full">
              <span style="color:#4A5A7F" class="flex items-center">{{i.label}}</span>
              <span class="font-extrabold text-2xl italic">{{i.value}}</span>
            </div>
            <div class="w-full h-[12px] bg-slate-100 rounded relative">
              <div class="h-full rounded absolute left-0 top-0 bg-blue-400"
              :style="{width: i.value / 10 * 100 + '%'}"

              ></div>
            </div>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>
